<template>
	<view class="chat-message">
		<view
			class="chat-message-item"
			v-for="(item, index) in list"
			:key="index"
			:class="[item.my ? `is-right` : `is-left`]"
		>
			<text class="date">{{ item.date }}</text>

			<view class="main">
				<view class="avatar" @tap="toUserDetail(item)">
					<cl-avatar :src="item.avatarUrl"></cl-avatar>
				</view>

				<view class="det">
					<text class="name">{{ item.nickName }}</text>

					<view class="content" :class="[`is-${item.type}`]" @tap="tapItem(item)">
						<template v-if="item.type === 'text'"> <rich-text style="white-space: pre-line;" :nodes="item.content" @longtap="copyContent(item)"></rich-text></template>

						<template v-else-if="item.type === 'image'">
							<image :src="item.imageUrl"></image>
						</template>

						<template v-else-if="item.type === 'voice'">
							<template v-if="item.my">
								<text class="duration">{{ item.duration }}''</text>
								<text class="iconfont icon-voice-left"></text>
							</template>

							<template v-else>
								<text class="iconfont icon-voice-right"></text>
								<text class="duration">{{ item.duration }}''</text>
							</template>
						</template>

						<template v-else-if="item.type === 'video'">
							<view class="video-btn">
								<image class="cover" :src="item.videoCoverUrl" />
								<text class="iconfont icon-play"></text>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>

		<cl-popup
			direction="center"
			:visible.sync="video.visible"
			force-update
			@close="onVideoClose"
		>
			<video id="video" autoplay :src="video.url"></video>
		</cl-popup>
	</view>
</template>

<script>
import H5Api from '@/components/ican-H5Api/ican-H5Api.js';
export default {
	components:{
		H5Api
	},
	props: {
		/*
			{
				type: 类型 text, image, video, voice
				my: 是否自己发送消息
				duration: 时常
				videoUrl: 视频地址
				videoCoverUrl: 视频封面
				imageUrl: 图片地址
				avatarUrl: 头像地址
				nickName: 昵称
			}
		*/
		list: Array,
		uid:String ,
		intime:String,
		myName:String,
		myImg:String
	},

	data() {
		return {
			video: {
				visible: false,
				url: ''
			}
		};
	},

	methods: {
		tapItem(item) {
			switch (item.type) {
				case 'text':
					break;
				case 'image':
					uni.previewImage({
						current: item.imageUrl,
						urls: [item.imageUrl]
					});
					break;
				case 'video':
					this.video.url = item.videoUrl;
					this.video.visible = true;
					break;
			}
		},

		toUserDetail() {
			var data = {
					uid:this.uid,
					intime:this.intime,
					myName:this.myName,
					myImg:this.myImg
			};
			uni.navigateTo({
				url: '/pages/user/detail?data='+JSON.stringify(data)
			});
		},

		onVideoClose() {
			const video = uni.createVideoContext('video');
			video.pause();
		},
		copyContent(item){
			// uni.setClipboardData({
			//     data: item,
			//     success: function () {
			//         uni.showToast({
			//         	icon:"none",
			// 			title:"复制内容成功！"
			//         })
			//     }
			// });
			uni.setClipboardData({ data:item.content, success:function(data){
				        uni.showToast({
				        	icon:"none",
							title:"复制内容成功！"
				        })
			}, fail:function(err){}, complete:function(res){} })
		}
	}
};
</script>

<style lang="scss" scoped>
.chat-message {
	&-item {
		font-size: 26rpx;
		padding: 20rpx;

		.date {
			display: block;
			text-align: center;
			margin: 20rpx 0;
			font-size: 24rpx;
		}

		.main {
			display: flex;

			.avatar {
				flex-shrink: 0;
				height: 80rpx;
			}

			.det {
				display: flex;
				flex-direction: column;
				max-width: 60%;

				.name {
					margin-bottom: 10rpx;
				}

				.content {
					display: inline-block;
					border-radius: 16rpx;
					box-sizing: border-box;
					
				
					
					&.is-text,
					&.is-voice {
						padding: 20rpx;
						line-height: 40rpx;
						letter-spacing: 1rpx;
					}

					&.is-image {
						image {
							max-height: 300rpx;
							max-width: 300rpx;
							border-radius: 16rpx;
						}
					}

					&.is-voice {
						display: flex;
						align-items: center;
						width: 130rpx;

						.icon-voice {
							font-size: 50rpx;
						}
					}

					&.is-video {
						.video-btn {
							height: 300rpx;
							width: 500rpx;
							text-align: center;
							line-height: 300rpx;
							border-radius: 16rpx;
							background-color: #000;
							position: relative;
							overflow: hidden;

							.cover {
								height: 100%;
								width: 100%;
								position: absolute;
								left: 0;
								top: 0;
							}

							.iconfont {
								color: #fff;
								font-size: 100rpx;
								position: relative;
							}
						}
					}

					&:active {
						opacity: 0.9;
					}
				}
			}
		}

		&.is-left {
			.det {
				margin-left: 20rpx;
				align-items: flex-start;

				.content {
					&.is-text,
					&.is-voice {
						border-top-left-radius: 0;
						background-color: #f6f7f9;
					}

					&.is-voice {
						justify-content: flex-start;
					}
				}
			}
		}

		&.is-right {
			.main {
				flex-direction: row-reverse;
			}

			.det {
				margin-right: 20rpx;
				align-items: flex-end;

				.content {
					&.is-text,
					&.is-voice {
						border-top-right-radius: 0;
						background-color: #ffc100;
					}

					&.is-voice {
						justify-content: flex-end;
					}
				}
			}
		}
	}
}
</style>
